<!--
 * @Description: 用户注册组件
 * @Author: hai-27
 * @Date: 2020-02-19 22:20:35
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:34
 -->
<template>
  <div id="register">
    <el-dialog title="注册" width="300px" center :visible.sync="isRegister">
      <el-form :model="RegisterUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="RegisterUser.name"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请输入密码" v-model="RegisterUser.pass">
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPass">
          <el-input prefix-icon="el-icon-view" type="password" placeholder="请再次输入密码" v-model="RegisterUser.confirmPass">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input prefix-icon="el-icon-view" placeholder="请输入真实姓名" v-model="RegisterUser.realname"></el-input>
        </el-form-item>

        <el-form-item>
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入性别" v-model="RegisterUser.gender"></el-input>
        </el-form-item>

        <el-form-item prop="email">
          <el-input prefix-icon="el-icon-view" placeholder="请输入邮箱" v-model="RegisterUser.email"></el-input>
        </el-form-item>

        <el-form-item prop="phone">
          <el-input prefix-icon="el-icon-view" placeholder="请输入电话" v-model="RegisterUser.phone"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="medium" type="primary" @click="Register" style="width: 100%">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "MyRegister",
    props: ["register"],
    data() {
      // 用户名的校验方法
      let validateName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("请输入用户名"));
        }
        // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
        const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        if (userNameRule.test(value)) {
          //判断数据库中是否已经存在该用户名
          this.$axios
            .post("http://localhost:8080/group3/yanzheng", {
              user_name: this.RegisterUser.name,
            })
            .then((res) => {
              // “001”代表用户名不存在，可以注册
              if (res.data.code == "001") {
                this.$refs.ruleForm.validateField("checkPass");
                return callback();
              } else {
                return callback(new Error("用户名存在"));
              }
            })
            .catch((err) => {
              return Promise.reject(err);
            });
        } else {
          return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
        }
      };
      // 密码的校验方法
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入密码"));
        }
        // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
        const passwordRule = /^[a-zA-Z]\w{5,17}$/;
        if (passwordRule.test(value)) {
          this.$refs.ruleForm.validateField("checkPass");
          return callback();
        } else {
          return callback(
            new Error("字母开头,长度6-18之间,允许字母数字和下划线")
          );
        }
      };
      // 确认密码的校验方法
      let validateConfirmPass = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入确认密码"));
        }
        // 校验是否以密码一致
        if (this.RegisterUser.pass != "" && value === this.RegisterUser.pass) {
          this.$refs.ruleForm.validateField("checkPass");
          return callback();
        } else {
          return callback(new Error("两次输入的密码不一致"));
        }
      };
      let validateemail = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入邮箱"));
        }
        const emailRule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (emailRule.test(value)) {
          this.$refs.ruleForm.validateField("checkPass");
          return callback();
        } else {
          return callback(new Error("格式xxxx@xx.xxx"));
        }
      };
      let validatetel = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入电话"));
        }
        const phoneRule = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (phoneRule.test(value)) {
          this.$refs.ruleForm.validateField("checkPass");
          return callback();
        } else {
          return callback(new Error("首字母不能为0的11位数字"));
        }
      };
      return {
        isRegister: false, // 控制注册组件是否显示
        RegisterUser: {
          name: "",
          pass: "",
          confirmPass: "",
          realname: "",
          gender: "",
          email: "",
          phone: "",
        },
        // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
        rules: {
          name: [{ validator: validateName, trigger: "blur" }],
          pass: [{ validator: validatePass, trigger: "blur" }],
          confirmPass: [{ validator: validateConfirmPass, trigger: "blur" }],
          email: [{ validator: validateemail, trigger: "blur" }],
          phone: [{ validator: validatetel, trigger: "blur" }],
        },
      };
    },
    watch: {
      // 监听父组件传过来的register变量，设置this.isRegister的值
      register: function (val) {
        if (val) {
          this.isRegister = val;
        }
      },
      // 监听this.isRegister变量的值，更新父组件register变量的值
      isRegister: function (val) {
        if (!val) {
          this.$refs["ruleForm"].resetFields();
          this.$emit("fromChild", val);
        }
      },
    },
    methods: {
      Register() {
        // 通过element自定义表单校验规则，校验用户输入的用户信息
        this.$refs["ruleForm"].validate((valid) => {
          //如果通过校验开始注册
          if (valid) {
            this.$axios
              .post("http://localhost:8080/group3/addUser", {
                user_name: this.RegisterUser.name,
                user_pwd: this.RegisterUser.pass,
                user_realname: this.RegisterUser.realname,
                user_gender: this.RegisterUser.gender,
                user_email: this.RegisterUser.email,
                user_phone: this.RegisterUser.phone,
              })
              .then((res) => {
                console.log(res);
                // “001”代表注册成功，其他的均为失败
                if (res.data.mess === "001") {
                  // 隐藏注册组件
                  this.isRegister = false;
                  // 弹出通知框提示注册成功信息
                  this.notifySucceed("注册成功");
                } else {
                  // 弹出通知框提示注册失败信息
                  this.notifyError("注册失败");
                }
              })
              .catch((err) => {
                return Promise.reject(err);
              });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style>
</style>